{% extends "zato/index.html" %}
{% load extras %}

{% block html_title %}{{ service.name }} - Overview{% endblock %}

{% block "extra_css" %}

<style type="text/css">

    #docs-table * p {
        padding-bottom:15px;
        line-height:100%;
    }

    #docs-table * li{
        list-style-type: square;
        margin-left:12px;
        padding-bottom:2px;
    }
</style>

{% endblock %}

{% block "extra_js" %}

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.form.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.sparkline.min.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/service/overview.js"></script>

{% endblock %}

{% block "content" %}

<div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

<h2 class="zato">Services : <a href="{% url "service" %}?cluster={{ cluster_id }}&amp;highlight={{ service.id }}" class="common">{{ service.name }}</a> : Overview</h2>

<div class='page_prompt'>
    <a href="{% url "service-overview" service.name %}?cluster={{ cluster_id }}" class="common current">Overview</a>
    <a href="{% url "service-ide" "service" service.name %}?cluster={{ cluster_id }}" class="common">IDE</a>
</div>

<div id="markup">
    <table id="data-table">
        <tr>
            <td class='inline_header'>Deployment info</td>
        </tr>
        <tr>
            <td>
                {% if service.deployment_info %}
                    <table>
                    {% for item in service.deployment_info %}
                        <tr>
                            <td>{{ item.server_name }}</td>
                            <td>{{ item.details }}</td>
                        </tr>
                    {% endfor %}
                    </table>
                {% else %}
                    (Service isn't deployed on any server)
                {% endif %}
            </td>
        </tr>
    </table>
</div>


{% endblock %}
